<template>
  <div class="container">
    <div class="clearfix">
      <el-button type="success" plain icon="el-icon-back" size="small" style="display:block;float:right;margin:15px 15px 0 0;" @click="goBack">返回上一页</el-button>
    </div>
    <el-row class="p-t-15">
      <el-col>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="英柬文" name="first"/>
          <el-tab-pane label="中文" name="second"/>
        </el-tabs>
      </el-col>
    </el-row>

    <div class="box-card">
      <el-card>
        <div slot="header" class="clearfix">
          <span>每日报表</span>
        </div>
        <div class="clearfix">
          <el-row class="search-content">
            <el-col>
              <date-range-picker
                v-model="datePicker1"
                class="w-240"
                size="small"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                @change="timeChange"/>
              <el-button type="primary" icon="el-icon-search" size="small" @click="search('search')">搜索</el-button>
            </el-col>
          </el-row>
          <div class="button-list">
            <el-button size="small" @click="toExport()">导出</el-button>
          </div>
        </div>
        <div class="list-content">
          <el-table
            v-loading="listLoading"
            id="newsTable"
            ref="newsTable"
            :data="tableData"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            style="width: 100%;margin-top:20px;">
            <el-table-column label="内容标题">
              <template slot-scope="scope">
                {{ scope.row.id }}
              </template>
            </el-table-column>
            <el-table-column prop="id" label="类型"/>
            <el-table-column prop="id" label="添加时间"/>
            <el-table-column prop="id" label="真实热度"/>
            <el-table-column prop="id" label="暴光PV"/>
            <el-table-column prop="id" label="曝光UV"/>
            <el-table-column prop="id" label="阅读量"/>
            <el-table-column prop="id" label="曝光阅读转化率"/>
            <el-table-column prop="id" label="操作" width="260">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="toDetail(scope.row.id,0)">详情分析</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="total>0" class="block fr">
            <el-pagination
              :current-page="listQuery.index"
              :page-sizes="[20, 50, 100]"
              :page-size="listQuery.size"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { dateShortcutKeyJS } from '@/mixins/index.js';
import timeUtils from '@/utils/timeHandle.js';
import { exportJsonToExcel, formatJson } from '@/utils/excel/Export2Excel';
import '@/assets/css/common/style.scss';
export default {
  mixins: [dateShortcutKeyJS],
  data() {
    return {
      tableName: {
        add: '英柬文',
        pass: '中文'
      },
      activeName: 'first',
      tableData: [{
        id: 666
      }],
      datePicker1: [
        timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 6, 'date'),
        timeUtils.timeHandle(new Date().getTime(), 'date')
      ], // 时间
      listLoading: false,
      submitLoading: false,
      total: 1,
      listQuery: {
        index: 1,
        size: 10
      },
      detailRouter: [
        '/thematicSectionAnalysis/thematicReport'
      ],
      separatedDays: null // 搜索时间相隔天数
    };
  },
  mounted() {
  },
  methods: {
    goBack() {
      this.$router.go(-1); // 返回上一层
    },
    /* 路由跳转 */
    toDetail(data, type) {
      this.$router.push({ path: this.detailRouter[type], query: { id: data }});
    },
    /* 时间选择 */
    timeChange(time) {
      if (!time) return;
      const startTime = Date.parse(time[0]);
      const endTime = Date.parse(time[1]);
      const Days = Math.floor(Math.abs(endTime - startTime) / (24 * 3600 * 1000));
      this.separatedDays = Days;
      if (Days == 0) {
        this.listQuery.dateType = 0;
      } else if (Days <= 30 && Days > 0) {
        this.listQuery.dateType = 1;
      } else if (Days > 30 && Days <= 48) {
        this.listQuery.dateType = 2;
      } else if (Days > 48) {
        this.listQuery.dateType = 3;
      }
    },
    search() {
      if (!this.datePicker1) {
        this.$message.warning('请输入搜索时间', true);
        return;
      }
      if (this.separatedDays === 0) {
        this.onlyOneDay = true;
      } else {
        this.onlyOneDay = false;
      }

      this.listQuery.startTime = this.datePicker1[0];
      this.listQuery.endTime = this.datePicker1[1];
    }, // 搜索
    // 分页改变
    handleSizeChange(val) {
      this.page.pageSize = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
    },

    /* 导出 */
    toExport() {
      const tableData = this.tableData;
      const tHeader = [
        '类型',
        '添加时间',
        '真实热度',
        '暴光PV',
        '曝光UV',
        '阅读量',
        '曝光阅读转化率'
      ];
      const tKey = [
        'id',
        'id',
        'id',
        'id',
        'id',
        'id',
        'id'
      ];
      const title = '专题内容分析';
      // 数据来源
      const data = formatJson(tKey, tableData); // 数据格式化
      const newDay = timeUtils.timeHandle(new Date().getTime(), 'date');
      const fileName = `${title}${newDay}`; // 导出时文件名
      exportJsonToExcel(tHeader, data, fileName); // 导出文件
    }
  }
};
</script>
<style lang="scss" scoped>
.w-150 {
  width: 150px;
}
/* 标签盒子 */
.box-card {
  margin: 0 0 20px 0;
}
/* 表格tab */
.search-content {
  float: left;
}
.button-list {
  float: right;
}
.list-content {
  overflow: hidden;
}
.block {
  margin: 20px 0 0 0;
}
</style>

